<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    router-link被称为声明式导航

    写在页面上，点击可以跳转
      to

    默认router-link会被转换为a标签，可以使用tag属性替换
  -->

  <div id="app">
    <router-link to="地址"></router-link>
    <router-link :to="'地址' + 变量"></router-link>
    <router-link :to="'/demo/' + id "></router-link>
    <router-link :to="'/demo?id=' + id "></router-link>

    <!-- to除了可以写字符串以外，还可以写对象 -->
    <router-link :to="{path: '/demo', query: {id: 1}}"></router-link>
    <a href="#/demo?id=1"></a>

    <!-- 如果我们想要添加params -->
    <router-link :to="{name: '路由名字', params: {}}"></router-link>

  </div>
  <script>
    const routes = [
      {
        name: '路由名字',
        path: '/',
        component: '组件名'
      }
    ]
  
  </script>
</body>
</html>